<template>
    <div class="msgIndex">
      <ComHeader title="授权通道" leftArrow='true' ref="header" />

      <mt-navbar v-model="selected">
          <mt-tab-item id="1">申请授权</mt-tab-item>
          <mt-tab-item id="2">审批授权</mt-tab-item>
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <!-- 未授权，填写资料 -->
            <div v-if="is_show_one" style="margin-top:5px;">
                <div v-if="is_show_input">
                    <mt-field class="" :label="item.msg" :placeholder="'请输入'+item.msg" type="text" rows="4"
                    v-model="item.value" :state="item.value!='' ? 'success' : '' " v-for="(item,index) in show_list" :key="index">
                    </mt-field>
                    <mt-button type="primary" size="large" @click="send">提交授权</mt-button>	
                    <mt-button type="primary" size="small" @click="get_code" v-html="code_msg" style="position: absolute;right: 5px;top: 108px;" :disabled="is_disabled"></mt-button>	
                </div>
                <div v-else >
                    <mt-cell title="您的上级正在审核中，请稍后..." to="/my" icon="back" ></mt-cell>
                </div>
            </div>
            <!-- 已填写资料 -->
            <div v-else> 
                <div>
                  <img :src="imgurl" alt="" style="width: 100%;height: 100%;   ">
                </div>
            </div>
          </mt-tab-container-item>
          <mt-tab-container-item id="2" style="padding:10px;">   
            <div v-if="audituser_list != ''">
                <p style="text-align:center;margin-bottom: 10px;">当前团队申请授权</p>
                <div v-for="(item,index) in audituser_list" :key="index" style="background: #fff;padding:20px;position: relative;">
                    <div>ID：{{item.userid}}</div>
                    <div>姓名：{{item.realname}}</div>
                    <div>手机号：{{item.phone}}</div>
                    <div>微信号：{{item.weixinewm}}</div>
                    <div>等级：{{item.level}}</div>
                    <div>申请时间：{{item.create_time}}</div>
                    <div class="fr" style="position: absolute;right: 10px;bottom: 15px;">
                        <mt-button type="primary" size="small" @click="modifieraudit(item.id,1)">通过</mt-button>
                        <mt-button type="default" size="small" @click="modifieraudit(item.id,2)">拒绝</mt-button>
                    </div>
                </div>
            </div>
            <div v-else>
              <p style="text-align:center;margin-top: 10px;">您的团队内无代理申请授权!</p>
            </div>

          </mt-tab-container-item>
        </mt-tab-container>
    </div>
  </template>
  <script>
  import Vue from 'vue'
  import api from "@/fetch/api"
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)
  import ComHeader from '@/common/ComHeader'
  import ComFooter from '@/common/ComFooter'
  import List from './List'
  import { Cell, Badge ,Navbar, TabItem,Button,Toast} from 'mint-ui';
    export default {
      data(){
        return {
          is_show_one:false,
          is_show_input:true,
          tip_msg:'0',
          is_show_img:true,
          code_msg:'请输入验证码',
          num:60,
          is_disabled:false,
          imgurl:'https://api.sailafeinav.com/media/auth/190210.png',
          show_list:[
          {
            msg:'真实姓名',
            value:'',
            state:'success',
          },
          {
            msg:'手机号',
            value:'',
            state:'success',
          },
          {
            msg:'验证码',
            value:'',
            state:'success',
          },
          {
            msg:'微信号',
            value:'',
            state:'success',
          },
        ],
          selected:'1',
          audituser_list:[],


        }
      },
      mounted () {
        // 作为下级，获取自己的申请状态
        // 获取当前ID，判断显示那个页面
        var params1 = {
          id: this.getUId()
          // id: 190210
        };
        api.getauthorize_get(params1)
          .catch(res => {
            console.log('是否显示页面',res);
            // 如果没有返回，这不操作
            if(!res){
              return
            }
            // 1、请先申请授权，完成
            if(res.data.code == 7){
              console.log(123)
              Toast('请先申请授权');
              // 显示第一个框，输入框
              this.is_show_one = true
              this.is_show_input = true
            }

            // 审核中
            if(res.data.code == 5){
              // 显示第一个框，审核中提示框
              this.is_show_one = true
              this.is_show_input = false
            }

            // 成功获取到授权书
            if(res.data.code == 1){
              console.log(123)
              // 显示第二个框
              this.is_show_one = false
              // 设置图片路径
              setTimeout(()=>{
                this.imgurl = 'http://api.sailafeinav.com/' + res.data.auth
              },1000)
            }
            // 审核未通过,请重新审核
            if(res.data.code == 6){

              Toast('审核未通过,请重新审核');
              this.is_show_one = true
              this.is_show_input = true
            }



            // 防止前端被人而已注入,当该用户不存在时返回
            if(res.data.code == 4){
              Toast('该用户不存在或输入有误');
              console.log(99999999)
            }
          })


      // 作为上级，获取下级的申请列表
          var params2 = {
            id: this.getUId()
            // id: 152028
          };
          api.audituser(params2)
            .catch(res => {
              console.log(2222,res);
              this.audituser_list = res.data.results
             
            })

      },
  
      components: {
        // Cell,
        // Badge,
        ComHeader,Navbar, TabItem
        // ComFooter,
        // Navbar, TabItem,List,Button
      },
      created() {


      },
      methods: {
        // 通过或者拒绝用户的申请
        modifieraudit(id,num){
          console.log(id,num)
          var params3 = {
            auditID: id,
            auditType: num
          };
          api.modifieraudit(params3)
            .catch(res => {
              console.log(333,res);
              this.audituser_list = res .data.results.data
              if(num == 1){
                Toast("已通过当前用户的申请")
              }else{
                Toast("已拒绝当前用户的申请")
              }
            })
        },
        
        // 获取验证码
        get_code(){
            if(!this.show_list[1].value){
              Toast("请填写手机号码")
              return
            }
              var times = setInterval(() => {
                this.code_msg = --this.num
                this.is_disabled = true
                if(this.num == 0){
                  clearInterval(times)
                  this.num = 60
                  this.code_msg = '请输入验证码'
                  this.is_disabled = false                  
                }
              }, 1000);
              // 发送验证码的api
              var params1 = {
                phone:this.show_list[1].value,
                  purpose: '4',
              }
              api.entrySendcode(params1)
                .catch(error => {
                    Toast(error.data.msg);
                })
        },
        // 发送请求
        send(){
          console.log(this.show_list[0].value,this.show_list[1].value,this.show_list[2].value,this.show_list[3].value)
          if(this.show_list[0].value=='' ||this.show_list[1].value==''||this.show_list[2].value==''||this.show_list[3].value==''){
            Toast("请将信息填写完整")
            return;
          }
          var params2 = {
            id: this.getUId(),
            // id: 225153,
            realname:this.show_list[0].value,
            phone:this.show_list[1].value,
            code:this.show_list[2].value,
            weixin:this.show_list[3].value
          };
          api.getauthorize_post(params2)
            .catch(res => {
              console.log(2222,res);
              // 审核中
              if(res.data.code == 5){
                console.log(123)
                Toast(res.data.msg);
                var that = this 
                // setTimeout(()=>{
                //   that.$router.push({  //核心语句
                //     path:'/mine',   //跳转的路径
                //   })
                // },2000)
              }else if(res.data.code == 8){
              // 提交成功
                Toast(res.data.msg);
                setTimeout(()=>{
                  this.is_show_input = false
                },1000)
              }else{
              // 其他错误信息
                Toast(res.data.msg);
              }
             
            })
        },
      }
    }
  </script>
  <style lang="stylus" scoped>
  .msgIndex{
    display :flex;
    flex-direction:column
  }
    .msgIndex,.scrollers{
      position: relative;
      height: 100%;
      padding-top:1.45rem;
    }
  </style>
